<template>
  <div class="main-container">
    <div style="margin:10px 0 0 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备点检</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>
    <div>
      <el-form :model="formData" inline>
        <!-- 月份选择 -->
        <el-form-item label="时间" label-width="50px">
          <el-date-picker v-model="formData.month" type="month" placeholder="选择月份" format="yyyy-MM" value-format="yyyy-MM"> </el-date-picker>
        </el-form-item>
        <!-- 设备列表选择器 -->
        <el-form-item label="设备" label-width="50px">
          <el-select class="w200" v-model="formData.equipment" placeholder="请选择设备">
            <el-option v-for="(item, index) in equipmentList" :key="index" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 规格型号输入框 -->
        <el-form-item label="规格型号" label-width="80px">
          <el-input v-model="formData.specification" class="w100"></el-input>
        </el-form-item>
        <!-- 设备编号输入框 -->
        <el-form-item label="设备编号" label-width="80px">
          <el-input class="w100" v-model="formData.equipmentNumber"></el-input>
        </el-form-item>
        <!-- 使用单位输入框 -->
        <el-form-item label="使用单位" label-width="80px">
          <el-input class="w100" v-model="formData.useUnit"></el-input>
        </el-form-item>
        <!-- 责任者输入框 -->
        <el-form-item label="责任者" label-width="60px">
          <el-input class="w100" v-model="formData.responsiblePerson"></el-input>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">设备点检</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="tableData1" border stripe>
        <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="split-box">操作箱</div>

      <el-table :data="tableData2" border stripe :show-header="false">
        <el-table-column prop="id" label="序号" width="50" align="center">
          <template #default="{ $index }">
            {{ $index + 10 }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="split-box">冷却系统</div>

      <el-table :data="tableData3" border stripe :show-header="false">
        <el-table-column prop="id" label="序号" width="50" align="center">
          <template #default="{ $index }">
            {{ $index + 12 }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="split-box">主轴温控机</div>

      <el-table :data="tableData4" border stripe :show-header="false">
        <el-table-column prop="id" label="序号" width="50" align="center">
          <template #default="{ $index }">
            {{ $index + 14 }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="split-box">气压系统</div>

      <el-table :data="tableData5" border stripe :show-header="false">
        <el-table-column prop="id" label="序号" width="50" align="center">
          <template #default="{ $index }">
            {{ $index + 16 }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="split-box">油压系统</div>

      <el-table :data="tableData6" border stripe :show-header="false">
        <el-table-column prop="id" label="序号" width="50" align="center">
          <template #default="{ $index }">
            {{ $index + 19 }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="点检项" min-width="200" align="center"></el-table-column>
        <el-table-column v-for="day in 31" :key="day" :prop="'day' + day" :label="day" align="center" width="45">
          <template #default="{ row }">
            {{ row['day' + day] === 'yes' ? '√' : '×' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class EquipmentCheck extends Vue {
  formData: any = {
    month: '2025-01',
    equipment: '数控龙门五面加工中心',
    specification: 'MS-423Z',
    equipmentNumber: 'BLKJ3-09',
    useUnit: '数控车间',
    responsiblePerson: '夏志远'
  }
  // 设备列表示例数据
  equipmentList: any = [
    { name: '数控龙门五面加工中心' },
    { name: '螺杆空气压缩机' },
    { name: '储气罐（烟台兴隆）' }
    // 可继续添加更多设备
  ]
  // 提交表单方法
  submitForm = () => {
    console.log('表单数据:', this.formData.value)
    // 这里可以添加实际的提交逻辑，如发送请求到后端
  }

  tableData1: any = [
    {
      id: 1,
      content: '主轴头内油位如有不足，要补充',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'no',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'no',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 2,
      content: '主轴锥孔内清洁，上油防锈',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'no',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'no',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'no',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 3,
      content: '清除机台切屑',
      day1: 'yes',
      day2: 'no',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'no',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'no',
      day13: 'yes',
      day14: 'no',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 4,
      content: '清除工作台切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'no',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'no',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 5,
      content: '清除X轴护盖切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'no',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'no',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 6,
      content: '清除Y轴护帘切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'no',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'no',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 7,
      content: '锁紧刀具刀把与拉柄',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'no',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'no',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 8,
      content: '清除附着在刀具、刀把切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'no',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'no',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'no',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'no',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 9,
      content: '清除Z轴轨道切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'no',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'no',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
  tableData2: any = [
    {
      id: 10,
      content: '检查面板指示灯有无异常？',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'no',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'no',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 11,
      content: '检查面板个开关有无异常？',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'no',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
  tableData3: any = [
    {
      id: 12,
      content: '切削水检查不足要补充',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'no',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'no',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 13,
      content: '清除集屑桶切屑',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'v',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'no',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
  tableData4: any = [
    {
      id: 14,
      content: '检查温控功能',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'no',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'no',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 15,
      content: '冷却油量检查不足要补充',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'no',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'no',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'no',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
  tableData5: any = [
    {
      id: 16,
      content: '检查空气压力',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'no',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'no',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 17,
      content: '检查润滑油量不足要补充',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'no',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'no',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'no',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 18,
      content: '排除三点组合过滤水',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'no',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'no',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
  tableData6: any = [
    {
      id: 19,
      content: '油量检查不足要补充',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 20,
      content: '检查油压压力',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    },
    {
      id: 21,
      content: '检查油压箱周围有无漏油？',
      day1: 'yes',
      day2: 'yes',
      day3: 'yes',
      day4: 'yes',
      day5: 'yes',
      day6: 'yes',
      day7: 'yes',
      day8: 'yes',
      day9: 'yes',
      day10: 'yes',
      day11: 'yes',
      day12: 'yes',
      day13: 'yes',
      day14: 'yes',
      day15: 'yes',
      day16: 'yes',
      day17: 'yes',
      day18: 'yes',
      day19: 'yes',
      day20: 'yes',
      day21: 'yes',
      day22: 'yes',
      day23: 'yes',
      day24: 'yes',
      day25: 'yes',
      day26: 'yes',
      day27: 'yes',
      day28: 'yes',
      day29: 'yes',
      day30: 'yes',
      day31: 'yes'
    }
  ]
}
</script>

<style lang="scss" scoped>
.split-box {
  padding-left: 50px;
  font-size: 14px;
  color: #909399;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
</style>
